<template>
  <div>
    <h2>任务：{{ data && data.task }}</h2>
    <h2>时间：{{ data && data.time }}</h2>
    <button @click="remove" r>X</button>
  </div>
</template>

<script setup lang="ts">
import { useStore } from 'vuex'
import { useRouter, useRoute } from 'vue-router'
import { IListItem } from '@/store/index'
import { computed } from 'vue';
let store = useStore()
let router = useRouter();
let route = useRoute();
let id = route.query.id;
// let data: IListItem | undefined = store.state.list.filter((item: IListItem) => item.id == id)[0]
let data: IListItem | undefined = computed<IListItem>(() => {
  let obj: IListItem = store.state.list.filter((item: IListItem) => item.id == id)[0]
  return obj
})
const remove = () => {
  store.commit('remove', id)
  router.push('/home')
}
</script>

<style lang="less" scoped>
</style>